<template>
  <!-- 1.v-on的基本使用 -->
  <button v-on:click="btnClick">点我吧</button>
  <button @click="btnClick">点我吧</button>
  <button @mousemove="btnMouseMove">别摸我</button>
  <button v-on="{ click: btnClick, mousemove: btnMouseMove }">啊啊啊啊</button>
  <button @="{ click: btnClick, mousemove: btnMouseMove }">啊啊啊啊aaa</button>

  <button @click="count++">第一种{{ count }}</button>
  <button @click="countClick">第二种{{ count }}</button>
  <hr />
  <!-- 默认会传递过去事件对象 -->
  <button @click="addClick">{{ addCount }}</button>
  <!-- $event会拿到事件对象,携带参数 -->
  <button @click="addClick2($event, 2)">{{ addCount }}</button>
  <button @click="addClick2(2, $event)">{{ addCount }}</button>
  <hr />
  <!-- v-on的修饰符 -->
  <div @click="FClick" class="father">
    father
    <div @click.stop="SClick" class="son">Son1</div>
  </div>
  <input type="text" @keyup="inpKeyUp" />
  <input type="text" @keyup.enter="inpKeyUp" />
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const count = ref(0)
    const btnClick = () => {
      console.log('我被点击啊了')
    }
    const btnMouseMove = () => {
      console.log('别摸我')
    }
    const countClick = () => {
      count.value += 1
    }
    const addCount = ref(100)
    const addClick = e => {
      console.log(e)
    }
    const addClick2 = (e, num) => {
      console.log(e, num)
    }
    const FClick = () => {
      console.log('FClick')
    }
    const SClick = () => {
      console.log('SClick')
    }
    const inpKeyUp = () => {
      console.log('inpKeyUp')
    }
    return { btnClick, inpKeyUp, btnMouseMove, countClick, addClick, count, addCount, addClick2, FClick, SClick }
  },
}
</script>
<style scoped>
.father {
  width: 100px;
  background-color: red;
}
.son {
  width: 50px;
  height: 50px;
  background-color: green;
}
</style>
